﻿<%@ MasterType VirtualPath="~/Main.master" %>
<%@ Import Namespace="Touch2Like.SharedLibrary" %>

<%@ Page Title="My Shopping Cart" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true"
    CodeBehind="Cart.aspx.cs" Inherits="Touch2Like.Web.Product.Cart" %>

<asp:Content ID="Content1" ContentPlaceHolderID="headcontent" runat="server">
    <style type="text/css">
        form select
        {
            height: auto;
        }
        .shopInfro, .shopCarbag
        {
            width: 960px;
            margin: 0 auto;
            color: #545351;
        }
        .shopCarbag li
        {
            height: 46px;
            line-height: 46px;
            float: left;
            width: 33.3%;
            text-align: center;
            color: #7E7E7E;
            font-size: 14px;
            background: #F6F6F6 url(/img/nav_icon_01.gif) no-repeat right top;
        }
        .shopCarbag li.selected
        {
            background: #E8E8E8 url(/img/nav_icon_02.gif) no-repeat right top;
        }
        .shopCarbag li span
        {
            display: inline-block;
            margin-right: 5px;
            font-weight: bold;
            font-size: 18px;
        }
        .shopCarbag li.selected
        {
            background: #e8e8e8 url(http://p.www.xiaomi.com/images/new816/nav_icon_02.gif) no-repeat right top;
        }
        .shopCarbag li.overed
        {
            background: #f6f6f6 url(http://p.www.xiaomi.com/images/new816/nav_icon_03.gif) no-repeat right top;
        }
        .shopCarbag li.item3
        {
            background: #f6f6f6 none;
        }
        .shopCartname
        {
            height: 30px;
            padding-top: 15px;
            border-width: 1px 1px 0;
            border-style: solid;
            border-color: #e6e4e3;
            background-color: #fafafa;
            font-size: 14px;
            color: #979693;
        }
        .shopCartname li
        {
            float: left;
            text-align: center;
            border-right: 1px solid #e6e4e3;
            line-height: 16px;
        }
        .shopCartname li.item1
        {
            width: 450px;
        }
        .shopCartname li.item2
        {
            width: 140px;
        }
        .shopCartname li.item3
        {
            width: 140px;
        }
        .shopCartname li.item4
        {
            width: 115px;
        }
        .shopCartname li.item5
        {
            width: 105px;
            border: 0;
        }
        .xmcart_message
        {
            padding: 20px;
            border: 1px solid #d6e2cc;
            background-color: #eef6e7;
            margin: 30px 0 0;
            color: #93b468;
            font-size: 14px;
        }
        .shopCarBox
        {
            margin: 25px 0 0;
        }
        .shopCarTotal
        {
            color: #545351;
            font-size: 14px;
            text-align: right;
            padding: 0 30px 20px 0;
            border-width: 1px;
            border-style: solid;
            border-color: #e6e4e3;
            background-color: #fafafa;
        }
        .shopCarTotal li
        {
            float: left;
        }
        .shopCarTotal li.item2
        {
            padding: 20px 0 0 0;
            float: right;
            font-weight: bold;
        }
        .shopCarTotal strong
        {
            color: #e94b01;
        }
        .shopCar_titIcon a.bnt_blue_1
        {
            margin-left: 30px;
            width: 85px;
            background-position: left -169px;
            text-align: left;
            padding-left: 18px;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: #333;
        }
        .shopCar_titIcon a.bnt_blue_1:hover
        {
            color: #f60;
        }
        .shopCarLi p
        {
            float: left;
            font-size: 14px;
            color: #545351;
            text-align: center;
        }
        .shopCarCheck
        {
            padding: 20px 0 20px;
        }
        .shopCarCheck li
        {
            float: left;
            width: 45%;
            color: #545351;
            line-height: 20px;
        }
        .shopCarCheck li.item1 a
        {
            color: #f60;
        }
        .shopCarCheck .item2
        {
            float: right;
        }
        .shopCarCheck .item2 a
        {
            float: right;
            width: 110px;
            margin-left: 10px;
        }
        .shopCart_promo
        {
            border: 1px solid #e1e1e1;
        }
        .shopCart_promo h3
        {
            height: 45px;
            padding-left: 20px;
            line-height: 45px;
            font-size: 14px;
            background-color: #fafafa;
            color: #545351;
        }
        .shopCart_promo_li
        {
            float: left;
            width: 239px;
            text-align: center;
            overflow: hidden;
        }
        .shopCart_promo_li ul
        {
            width: 200px;
            height: 332px;
            margin: 0 auto;
            border-bottom: 1px dotted #ccc;
        }
        .shopCart_promo_li ul.noborder
        {
            border: 0;
        }
        .shopCart_promo_li .goodsDisplay_item2, .shopCart_promo_li .goodsDisplay_item3
        {
            padding: 0;
        }
        .shopCart_promo_li .goodsDisplay_item2
        {
            height: 16px;
            line-height: 16px;
            overflow: hidden;
        }
        .shopCart_promo_li .goodsDisplay_item3
        {
            margin-top: 5px;
        }
        .shopCart_promo_li .goodsDisplay_item3 span
        {
            font-weight: bold;
            font-size: 14px;
        }
        .shopCart_promo_li .goodsDisplay_item1 a
        {
            height: 230px;
            line-height: 220px;
            _font-size: 190px;
        }
        .shopCarLi p.mi_goods_name
        {
            width: 360px;
            line-height: 20px;
            padding: 0 0 0 10px;
            text-align: left;
        }
        .mi_goods_name a strong
        {
            color: #545351;
            font-weight: normal;
        }
        .mi_goods_name span
        {
            display: block;
            color: #999;
            line-height: 18px;
            overflow: hidden;
            font-size: 12px;
        }
        .mi_goods_pic
        {
            width: 60px;
            height: 60px;
            background-color: #fff;
            overflow: hidden;
        }
        .mi_goods_pic img
        {
            width: 60px;
            height: 60px;
        }
        .mi_cellPrice, .mi_selectNum
        {
            width: 145px;
        }
        .mi_cellTotalprice
        {
            width: 100px;
        }
        .mi_del_order
        {
            width: 90px;
        }
        .shopCarLi p.mi_del_order
        {
            float: right;
            white-space: nowrap;
            padding: 0;
            _width: expression((documentElement.clientWidth>55)?"55px":"auto");
        }
        .mi_del_order a
        {
            color: #e05e40;
            font-size: 14px;
            display: block;
            height: 20px;
            margin-bottom: 10px;
            line-height: 18px;
        }
        .shopCar_titIcon li.item1
        {
            float: left;
            color: #545351;
        }
        .shopCar_titIcon li.item1 h2, .shopCar_titIcon li.item1 p
        {
            float: left;
        }
        .shopCar_titIcon li.item1 p
        {
            line-height: 1.5;
            padding-left: 15px;
        }
        .shopCar_titIcon li.item2
        {
            float: right;
        }
        .shopCarTit
        {
            height: 27px;
            font-size: 16px;
            line-height: 18px;
            color: #333;
        }
        .shopCarUl
        {
            border-width: 0 1px;
            border-style: solid;
            border-color: #e6e4e3;
            background-color: #fff;
        }
        .shopCarLi p.mi_price_check
        {
            float: right;
        }
        .shopCarUl .items
        {
            border-bottom: 1px solid #f0d2c4;
        }
        .shopCarLi_package
        {
            display: none;
            clear: both;
            background-color: #fafafa;
            position: relative;
            -moz-box-shadow: 1px 2px 3px #e3e3e3 inset;
            -webkit-box-shadow: 1px 2px 3px #e3e3e3 inset;
            -khtml-box-shadow: 1px 2px 3px #e3e3e3 inset;
            box-shadow: 1px 2px 3px #e3e3e3 inset;
        }
        .shopCarLi_package_icon
        {
            display: none;
            width: 25px;
            height: 17px;
            position: absolute;
            left: 38px;
            top: 108px;
            background: url(http://p.www.xiaomi.com/images/new816/webIndex_01.gif?07) no-repeat -387px -62px;
        }
        .shopCarLi_package_list
        {
            padding: 30px 15px;
            border-top: 1px solid #e6e4e3;
        }
        .shopCarLi_box
        {
            padding: 30px 15px;
            border-top: 1px solid #e5e5e5;
        }
        .shopCarTips
        {
            color: #c00;
            text-align: right;
            padding-top: 10px;
        }
        .shopBtn
        {
            display: block;
            height: 36px;
            font-size: 14px;
            text-align: center;
            line-height: 36px;
            color: #fff;
            background: #ec4f22;
            font-weight: bold;
            background: -webkit-gradient(linear,left top,left bottom,color-stop(#ff6e42,0),color-stop(#ec4f22,1));
            background: -webkit-linear-gradient(top,#ff6e42 0,#ec4f22 100%);
            background: -moz-linear-gradient(top,#ff6e42 0,#ec4f22 100%);
            background: -o-linear-gradient(top,#ff6e42 0,#ec4f22 100%);
            background: linear-gradient(top,#ff6e42 0,#ec4f22 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6e42',endColorstr='#ec4f22',GradientType=0);
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            border: 1px solid #fc6236;
        }
        .shopBtn:hover
        {
            -webkit-box-shadow: 0 1px 1px #fb7a54 inset,1px 1px 2px rgba(0,0,0,0.4);
            -moz-box-shadow: 0 1px 1px #fb7a54 inset,1px 1px 2px rgba(0,0,0,0.4);
            box-shadow: 0 1px 1px #fb7a54 inset,1px 1px 2px rgba(0,0,0,0.4);
        }
        .shopBtn:active
        {
            background: #ec4f22;
            -webkit-box-shadow: 1px 1px 2px #ec4a1c inset;
            -moz-box-shadow: 1px 1px 2px #ec4a1c inset;
            box-shadow: 1px 1px 2px #ec4a1c inset;
        }
    </style>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            orderprice = 0;
            $(".shopCarUl").each(function () {
                goodsprice = parseFloat($.trim($(this).find(".goodsprice").text()));
                goodscount = parseInt($.trim($(this).find(".goodscount").val()));
                if (isNaN(goodscount)) goodscount = 0;
                $(this).find(".orderprice").text(getpricestring(goodscount * goodsprice));
                orderprice += goodscount * goodsprice;
            });
            jQuery("#span_total").text(getpricestring(orderprice));

            $(".goodscount").keyup(function () {
                orderprice = 0;
                $(".shopCarUl").each(function () {
                    goodsprice = parseFloat($.trim($(this).find(".goodsprice").text()));
                    goodscount = parseInt($.trim($(this).find(".goodscount").val()));
                    goodsmaxcount = parseInt($.trim($(this).find(".goodsmaxcount").val()));
                    if (goodscount > goodsmaxcount) {
                        alert("invalid count");
                        goodscount = goodsmaxcount;
                        $(this).find(".goodscount").val(goodscount);
                    }
                    if (isNaN(goodscount)) goodscount = 0;
                    $(this).find(".orderprice").text(getpricestring(goodscount * goodsprice));
                    orderprice += goodscount * goodsprice;
                });
                jQuery("#span_total").text(getpricestring(orderprice));
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="maincontent" runat="server">
    <div id="header_bottom">
        <div class="container clearfix">
            <div class="shopCarbag">
                <ul class="cfl">
                    <li title="Step 1 of 3. Check out from cart" class="selected item1"><span>1</span>Your
                        Cart</li>
                    <li title="Step 2 of 3. Fill out the payment information" class="item2"><span>2</span>Order
                        Detail</li>
                    <li title="Step 3 of 3. Confirm with the purcharse" class="item3"><span>3</span>Confirmation</li>
                </ul>
                <div class="clear">
                </div>
            </div>
            <div class="shopCarBox" id="shopCarBox">
                <div class="shopCar_titleIcon">
                    <ul class="cfl">
                        <li class="item1 cfl">
                            <h2 class="shopCarTit">
                                My Cart</h2>
                        </li>
                    </ul>
                    <div class="clear">
                    </div>
                </div>
                <ul class="shopCartname cfl">
                    <li class="item1">Product</li>
                    <li class="item2">Price</li>
                    <li class="item3">Qty</li>
                    <li class="item4">Total</li>
                    <li class="item5"></li>
                    <div class="clear">
                    </div>
                </ul>
                <asp:Repeater ID="Repeater_Cart" runat="server">
                    <ItemTemplate>
                        <ul class="shopCarUl">
                            <li class="  shopCarLi">
                                <div class="shopCarLi_box cfl">
                                    <p class="mi_goods_pic">
                                        <a href="/Product/Detail.aspx?ID=<%#Server.UrlEncode(Utility.Encryption.Encrypt(Eval("GoodsID").ToString())) %>"
                                            target="_blank">
                                            <img src="<%#Eval("PictureLocation") %>" width="60" height="60">
                                        </a>&nbsp;</p>
                                    <p class="mi_goods_name">
                                        <a href="/Product/Detail.aspx?ID=<%#Server.UrlEncode(Utility.Encryption.Encrypt(Eval("GoodsID").ToString())) %>"
                                            target="_blank"><strong>
                                                <%#Eval("Name") %></strong></a><span>No.
                                                    <%#Eval("GoodsID") %></span> <span class="mi_goods_name_showPacket" animateid="1">
                                                        <%#Eval("Headlines") %></span>
                                    </p>
                                    <p class="mi_cellPrice">
                                        $<span class="goodsprice"><%#Eval("GoodsPrice") %></span></p>
                                    <p class="mi_selectNum">
                                        <asp:HiddenField ID="tb_ListID" runat="server" Value='<%#Eval("ListID") %>' />
                                        <asp:HiddenField ID="tb_OrderNumber" runat="server" Value='<%#Eval("OrderNumber") %>' />
                                        <asp:HiddenField ID="tb_GoodsID" runat="server" Value='<%#Eval("GoodsID") %>' />
                                        <asp:TextBox ID="tb_GoodsMaxCount" runat="server" Text='<%#Eval("GoodsMaxCount") %>'
                                            CssClass="hidden goodsmaxcount"></asp:TextBox>
                                        <asp:TextBox ID="tb_GoodsCount" runat="server" Text='<%#Eval("GoodsCount") %>' Width="50px"
                                            CssClass="goodscount"></asp:TextBox>
                                    </p>
                                    <p class="mi_cellTotalprice">
                                        $<span class="orderprice"><%#Eval("OrderPrice") %></span></p>
                                    <p class="mi_del_order">
                                        <asp:LinkButton ID="btn_Delete" runat="server" CommandArgument='<%#Eval("ListID") %>'
                                            Text="Remove" OnClick="btn_Delete_Click"></asp:LinkButton>
                                    </p>
                                    <div class="clear">
                                    </div>
                                </div>
                                <span class="shopCarLi_package_icon"></span></li>
                        </ul>
                    </ItemTemplate>
                </asp:Repeater>
                <ul class="shopCarTotal cfl" style="clear: both;">
                    <li class="item2"><strong>Total: $<span id="span_total"></span></strong> </li>
                    <div class="clear">
                    </div>
                </ul>
                <ul class="shopCarCheck cfl">
                    <li class="item1">&nbsp; </li>
                    <li class="item2 cfl">
                        <asp:LinkButton ID="btn_Checkout" runat="server" CssClass="shopBtn" Text="Check Out"
                            OnClick="btn_Checkout_Click"></asp:LinkButton>
                        <a class="shopBtn" style="width: 200px;" href="/Store.aspx">Continue Shopping</a>
                    </li>
                </ul>
            </div>
            <div class="clear">
            </div>
            <div style="text-align: center" class="clearfix">
                <asp:PlaceHolder ID="PH_NoGoods" runat="server" Visible="false">
                    <h3>
                        Your shopping cart is empty, <a href="/Store.aspx" style="color: #EC4F22;">click here</a>
                        to add more stuff.
                    </h3>
                </asp:PlaceHolder>
            </div>
        </div>
    </div>
</asp:Content>
